<link rel="stylesheet" type="text/css" href="assets/plugins/H-ui_v3.1.1/lib/icheck/icheck.css"/>
<p class="com-title">
	个人信息
</p>
<form class="site-selection-form form form-horizontal" id="siteSelectForm">
	<div class="row cl">
		<label class="form-label per15">
			会员名：
		</label>
		<div class="formControls per75">
			<b class="f-14">xubin</b>
		</div>
	</div>
	<div class="row cl">
		<label class="form-label per15">
			头像：
		</label>
		<div class="formControls per75 up-img-wapper">
			<img src="images/user-face.gif" class="f-l"/>
			<div class="f-l mt-50 up-img-btn">
				<span class="btn-upload">
				  	<a href="javascript:void();" class="btn btn-primary radius">
				  		<i class="Hui-iconfont Hui-iconfont-upload"></i> 选择图片
				  	</a>
				  	<input type="file" multiple name="file_0" class="input-file">
				</span>
				<p class="c-primary">图片格式:GIF、JPG、JPEG、PNG,最适合尺寸120*120 像素</p>
			</div>
		</div>
	</div>
	<div class="row cl">
		<label class="form-label per15">
			昵称：
		</label>
		<div class="formControls per50 error-parent">
			<span class="f-14">xubin</span>
			<a class="text-right-edit ml-10 c-success" onclick="editNickName()">[修改]</a>
		</div>
	</div>
	<div class="row cl">
		<label class="form-label per15">
			邮件：
		</label>
		<div class="formControls per75">
			<span class="f-14">123@qq.com</span>
		</div>
	</div>
	
	<div class="row cl">
		<label class="form-label per15">
			<span class="c-error">*</span>姓名：
		</label>
		<div class="formControls per15 error-parent">
			<span class="f-l per100 ">
				<input type="text" name="name" class="input-text size-M">
			</span>
		</div>
	</div>
	
	<div class="row cl">
		<label class="form-label per15">
			<span class="c-error">*</span>性别：
		</label>
		<div class="formControls per15 error-parent">
			<div class="radio-box">
				<input type="radio" id="radio-11" name="sex">
				<label for="radio-11">男</label>
			</div>
			<div class="radio-box">
				<input type="radio" id="radio-12" name="sex">
				<label for="radio-12">女</label>
			</div>
		</div>
	</div>
	
	<div class="row cl">
		<label class="form-label per15">
			<span class="c-error">*</span>所在地区：
		</label>
		<div class="formControls per75">
			<span class="select-box f-l per30 mr-10 error-parent">
				<select class="select" name="province">
				    <option value="" selected>省</option>
				    <option value="1">1</option>
				    <option value="2">2</option>
				    <option value="3">3</option>
				</select>
			</span>
			<span class="select-box f-l per30 mr-10 error-parent">
				<select class="select" name="city">
				    <option value="" selected>市</option>
				    <option value="1">11</option>
				    <option value="2">12</option>
				    <option value="3">13</option>
				</select>
			</span>
			<span class="select-box f-l per30 error-parent">
				<select class="select" name="area">
				    <option value="" selected>区</option>
				    <option value="1">111</option>
				    <option value="2">112</option>
				    <option value="3">113</option>
				</select>
			</span>
			
		</div>
	</div>
	
	<div class="row cl">
		<label class="form-label per15">
			联系地址：
		</label>
		<div class="formControls per75">
			<span class="f-l per30 ">
				<input type="text" name="" class="input-text size-M">
			</span>
		</div>
	</div>
	
	<div class="row cl">
		<span class="form-label per15">
			邮政编码：
		</span>
		<div class="formControls per15">
			<span class="f-l per100">
				<input type="text" name="" class="input-text size-M">
			</span>
		</div>
	</div>
	
	<div class="row cl">
		<span class="form-label per15">
			联系电话：
		</span>
		<div class="formControls per75">
			<span class="f-l per30">
				<input type="text" name="" class="input-text size-M">
			</span>
		</div>
	</div>
	<div class="row cl">
		<span class="form-label per15">
			手机号码：
		</span>
		<div class="formControls per75">
			<span class="f-l per30">
				<input type="text" name="" class="input-text size-M">
			</span>
		</div>
	</div>
	<div class="row cl">
		<span class="form-label per15">
			部门：
		</span>
		<div class="formControls per75">
			<span class="f-l per30 ">
				<input type="text" name="" class="input-text size-M">
			</span>
		</div>
	</div>
	<div class="row cl">
		<span class="form-label per15">
			职位：
		</span>
		<div class="formControls per75">
			<span class="f-l per30 ">
				<input type="text" name="" class="input-text size-M">
			</span>
		</div>
	</div>
	<div class="row cl">
		<span class="form-label per15">
			QQ：
		</span>
		<div class="formControls per75">
			<span class="f-l per30 ">
				<input type="text" name="" class="input-text size-M">
			</span>
		</div>
	</div>
	<div class="row cl">
		<span class="form-label per15">
			阿里旺旺：
		</span>
		<div class="formControls per75">
			<span class="f-l per30 ">
				<input type="text" name="" class="input-text size-M">
			</span>
			<div class="f-l mt-10 ml-10">
				如果是阿里旺旺,请填写TB:旺旺账号,例如:TB:abcd,否则无法点亮
			</div>
		</div>
	</div>
	<div class="row cl">
		<span class="form-label per15">
			站内信提示音：
		</span>
		<div class="formControls per75">
			<div class="radio-box">
				<input type="radio" id="radio-21" name="">
				<label for="radio-21">无</label>
			</div>
			<div class="radio-box">
				<input type="radio" id="radio-22" name="">
				<label for="radio-22">提示音1</label>
			</div>
			<div class="radio-box">
				<input type="radio" id="radio-23" name="">
				<label for="radio-23">提示音2</label>
			</div>
			<div class="radio-box">
				<input type="radio" id="radio-24" name="">
				<label for="radio-24">提示音3</label>
			</div>
		</div>
	</div>
	
	<div class="row cl">
		<span class="form-label per15">
			
		</span>
		<div class="formControls per75">
			<button type="submit" class="btn btn-primary radius">保 存</button>
		</div>
	</div>
</form>

<div id="editNickName" class="modal fade" tabindex="-1" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content radius">
			<div class="modal-header">
				<h3 class="modal-title">修改昵称?</h3>
				<a class="close" data-dismiss="modal" href="javascript:void();">×</a>
			</div>
			<div class="modal-body">
				<input type="text" name="" class="input-text size-M" placeholder="请输入新的昵称">
			</div>
			<div class="modal-footer">
				<button class="btn btn-primary">修改</button>
				<button class="btn" data-dismiss="modal">取消</button>
			</div>
		</div>
	</div>
</div>


<script type="text/javascript" src="assets/plugins/H-ui_v3.1.1/lib/icheck/jquery.icheck.min.js"></script>
<script type="text/javascript" src="assets/plugins/H-ui_v3.1.1/lib/jquery.validation/jquery.validate.min.js"></script>
<script type="text/javascript" src="assets/plugins/H-ui_v3.1.1/lib/jquery.validation/additional-methods.min.js"></script>
<script type="text/javascript" src="assets/plugins/H-ui_v3.1.1/lib/jquery.validation/messages_zh.js"></script>
<script type="text/javascript">
	$(function(){
		$('.row input').iCheck({
			checkboxClass: 'icheckbox-blue',
			radioClass: 'iradio-blue',
			increaseArea: '20%'
		})
		
		//表单验证
		$("#siteSelectForm").validate({
			rules:{
				name:{
					required:true
				},
				sex:{
					required:true
				},
				province:{
					required:true
				},
				city:{
					required:true
				},
				area:{
					required:true
				}
			},
			onkeyup:false,
			submitHandler:function(form){
				debugger
			},
			errorPlacement:function(error,element){
				error.appendTo(element.parents('.error-parent'));
			}
		});
	});
	
	function editNickName(){
		$("#editNickName").modal("show")
	}
</script>